<template>
	<div class="tab">
		<router-link tag="div" class="tab-item" to="/recommend"><span>Recommend</span></router-link>
		<router-link tag="div" class="tab-item" to="/singer"><span>Singer</span></router-link>
		<router-link tag="div" class="tab-item" to="/rank">Rank</router-link>
		<router-link tag="div" class="tab-item" to="/search">Search</router-link>
	</div>
</template>
<script type="text/javascript">
	export default{

	}
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
	@import "~@/common/stylus/variable"
	.tab
		display:flex
		height:44px
		line-height:44px
		font-size:$font-size-medium
		.tab-item
			flex:1
			text-align:center
			&.router-link-active
				
				color:$color-theme
				border-bottom:2px solid $color-theme
		
</style>